<template>
  <div class="container">
    <div class="main-header">
      <h2 class="main-title">用户情绪监控</h2>
    </div>


    <!-- 用户选择框 -->
    <div class="search-box">
    <select v-model="selectedUser" class="user-select">
      <option value="">全部用户</option>
      <option v-for="user in users" :key="user.id" :value="user.id">
        {{ user.name }}
      </option>
    </select>
    </div>

    <div class="sentiment-dashboard">
      <div class="left-chart">
        <div class="chart-title">情绪趋势变化</div>
        <p class="chart-subtitle">
          {{ selectedUser ? "用户情绪趋势" : "基于对话内容的情感分析结果" }}
        </p>
        <v-chart class="chart" :option="sentimentOption" autoresize />
      </div>

      <div class="right-summary">
        <div class="chart-title">情绪分析摘要</div>
        <p class="chart-subtitle">
          {{ selectedUser ? "该用户最新情绪统计" : "本月用户情绪统计" }}
        </p>
        <ul class="summary-list">
          <li>
            <span class="icon positive">✔</span>
            <span class="percent">{{ summary.positive }}%</span>
            <span class="label">积极情绪</span>
          </li>
          <li>
            <span class="icon neutral">⚠</span>
            <span class="percent">{{ summary.neutral }}%</span>
            <span class="label">中性情绪</span>
          </li>
          <li>
            <span class="icon negative">❗</span>
            <span class="percent">{{ summary.negative }}%</span>
            <span class="label">消极情绪</span>
          </li>
        </ul>
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref, computed, watch } from "vue";
import VChart from "vue-echarts";
import * as echarts from "echarts/core";
import { LineChart } from "echarts/charts";
import { TooltipComponent, LegendComponent, GridComponent } from "echarts/components";
import { CanvasRenderer } from "echarts/renderers";

echarts.use([LineChart, TooltipComponent, LegendComponent, GridComponent, CanvasRenderer]);

// 模拟用户列表
const users = ref([
  { id: "u1", name: "张三" },
  { id: "u2", name: "李四" },
  { id: "u3", name: "王五" },
]);

// 下拉框绑定
const selectedUser = ref("");

// 模拟全部用户的总体数据
const overallData = {
  dates: ["10-01", "10-02", "10-03", "10-04", "10-05", "10-06", "10-07"],
  positive: [65, 68, 62, 70, 72, 75, 78],
  neutral: [25, 22, 28, 20, 18, 17, 15],
  negative: [10, 10, 10, 10, 10, 8, 7],
};

// 模拟每个用户的情绪数据
const userData = {
  u1: {
    dates: overallData.dates,
    positive: [60, 62, 65, 67, 70, 72, 75],
    neutral: [30, 28, 25, 22, 20, 18, 15],
    negative: [10, 10, 10, 11, 10, 10, 10],
  },
  u2: {
    dates: overallData.dates,
    positive: [70, 72, 74, 75, 76, 77, 80],
    neutral: [20, 18, 18, 17, 16, 15, 14],
    negative: [10, 10, 8, 8, 8, 8, 6],
  },
  u3: {
    dates: overallData.dates,
    positive: [55, 58, 60, 62, 63, 65, 67],
    neutral: [35, 32, 30, 28, 27, 25, 23],
    negative: [10, 10, 10, 10, 10, 10, 10],
  },
};

// 当前选中的数据
const currentData = computed(() => {
  return selectedUser.value ? userData[selectedUser.value] : overallData;
});

// ECharts 配置
const sentimentOption = computed(() => ({
  tooltip: { trigger: "axis" },
  legend: {
    data: ["positive", "neutral", "negative"],
    bottom: 0,
    textStyle: { color: "#666" },
    selectedMode: "single",
  },
  grid: {
    left: "3%",
    right: "3%",
    bottom: "15%",
    top: "10%",
    containLabel: true,
  },
  xAxis: {
    type: "category",
    boundaryGap: false,
    data: currentData.value.dates,
    axisLine: { lineStyle: { color: "#e0e0e0" } },
  },
  yAxis: {
    type: "value",
    max: 100,
    axisLine: { lineStyle: { color: "#e0e0e0" } },
    splitLine: { lineStyle: { type: "dashed", color: "#ddd" } },
  },
  series: [
    {
      name: "positive",
      type: "line",
      stack: "total",
      areaStyle: { color: "rgba(52, 199, 89, 0.5)" },
      lineStyle: { color: "#34c759" },
      data: currentData.value.positive,
    },
    {
      name: "neutral",
      type: "line",
      stack: "total",
      areaStyle: { color: "rgba(142, 142, 147, 0.5)" },
      lineStyle: { color: "#8e8e93" },
      data: currentData.value.neutral,
    },
    {
      name: "negative",
      type: "line",
      stack: "total",
      areaStyle: { color: "rgba(255, 59, 48, 0.5)" },
      lineStyle: { color: "#ff3b30" },
      data: currentData.value.negative,
    },
  ],
}));

// 情绪摘要（取最后一天的数据）
const summary = computed(() => {
  const pos = currentData.value.positive.slice(-1)[0];
  const neu = currentData.value.neutral.slice(-1)[0];
  const neg = currentData.value.negative.slice(-1)[0];
  return {
    positive: pos,
    neutral: neu,
    negative: neg,
  };
});
</script>

<style scoped>
.container {
  padding: 20px;
  background: #f9fafb;
}

.main-header {
  margin-bottom: 20px;
  padding-bottom: 5px;
  border-bottom: 1px solid #f0f0f0;
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.search-box{
  margin-top: 5px;
  margin-bottom: 25px;
  align-items: center;
}

.user-select {
  padding: 6px 12px;
  border: 1px solid #ddd;
  border-radius: 6px;
  font-size: 14px;
  width: 35%;
  height: 30px;
}

.sentiment-dashboard {
  display: flex;
  gap: 20px;
}

.left-chart,
.right-summary {
  flex: 1;
  background: #fff;
  border-radius: 12px;
  padding: 20px;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.05);
}

.chart-title {
  font-size: 16px;
  font-weight: 600;
  margin-bottom: 6px;
}
.chart-subtitle {
  font-size: 13px;
  color: #999;
  margin-bottom: 12px;
}

.chart {
  height: 300px;
  width: 100%;
}

.summary-list {
  list-style: none;
  padding: 0;
  margin: 0;
}
.summary-list li {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 0;
  font-size: 14px;
  border-bottom: 1px dashed #eee;
}
.summary-list li:last-child {
  border-bottom: none;
}
.icon {
  font-size: 18px;
}
.icon.positive {
  color: #34c759;
}
.icon.neutral {
  color: #ff9500;
}
.icon.negative {
  color: #ff3b30;
}
.percent {
  font-weight: bold;
  font-size: 16px;
  width: 50px;
}
.label {
  color: #555;
}
</style>
